<template>
  <KView class="goods-detail-header clearfix">
    <KView style="float:left" class="goods-detail-header-image">
      <KButton class="detail-header-btn" @click="toBack">
        <img class="sys-img" :src="imgData.toBack" mode="aspectFit">
      </KButton>
    </KView>
    <KView v-if="hasCart||hasShare" style="float:right;height:100%" class="clearfix">
      <KView v-if="hasCart" style="float:left" class="goods-detail-header-image">
        <KButton class="detail-header-btn" @click="toShoppingCart">
          <img class="sys-img" :src="imgData.shoppingCart" mode="aspectFit">
        </KButton>
      </KView>
      <KView v-if="hasShare" style="float:left" class="goods-detail-header-image">
        <KButton v-if="isMiniprogram" open-type="share" class="detail-header-btn">
          <img class="sys-img" :src="imgData.share" mode="aspectFit">
        </KButton>
        <KButton v-else class="detail-header-btn" @click="toShare">
          <img class="sys-img" :src="imgData.share" mode="aspectFit">
        </KButton>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  export default {
    props: {
      hasCart: {
        type: Boolean,
        default: true
      },
      hasShare: {
        type: Boolean,
        default: true
      }
    },

    data() {
      let imgData = GlobalData.images.goodsDetail;
      return {
        imgData,
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      toBack() {
        this.$emit('to-back');
      },

      toShoppingCart() {
        this.$emit('shop-cart');
      },

      toShare() {

      }
    }
  };

</script>

<style lang="scss">
  .goods-detail-header {
    height: 100%;

    .goods-detail-header-image {
      height: 100%;
      width: formatPx(70);

      .detail-header-btn {
        width: 100%;
        height: 100%;
        padding: 0;
        background: none;
        border: none;

        :active {
          background: none;
        }
      }
    }

    .goods-detail-header-image+.goods-detail-header-image {
      margin-left: formatPx(30);
    }
  }

</style>
